<template>
  <div class="fd-nav-container">
    <div class="fd-nav-content">
      <!-- title -->
      <!-- <div class="fd-nav">
          <div class="fd-nav-left">
            <div class="fd-nav-title">{{ workFlowDef.name }}</div>
          </div>
          <div class="fd-nav-right">
            <el-button
              type="primary"
              size="small"
              class="fd-nav-right-saveSet"
              @click="saveSet"
              >发布</el-button
            >
          </div>
        </div> -->
      <!-- content -->
      <section class="dingflow-design">
        <div class="zoom">
          <div
            :class="'zoom-out' + (nowVal == 50 ? ' disabled' : '')"
            @click="zoomSize(1)"
          ></div>
          <span>{{ nowVal }}%</span>
          <div
            :class="'zoom-in' + (nowVal == 300 ? ' disabled' : '')"
            @click="zoomSize(2)"
          ></div>
        </div>
        <div
          class="box-scale"
          id="box-scale"
          :style="
            'transform: scale(' +
            nowVal / 100 +
            '); transform-origin: 50% 0px 0px;'
          "
        >
          <nodeWrap
            :nodeConfig.sync="nodeConfig"
            :isPrewView="isPrewView"
          ></nodeWrap>
          <div class="end-node">
            <div class="end-node-circle"></div>
            <div class="end-node-text">流程结束</div>
          </div>
        </div>
      </section>
    </div>
    <!-- 审核人抽屉 -->
    <approverDrawer />
  </div>
</template>
<script>
import approverDrawer from "@/components/workflow/drawer/approverDrawer";
import errorDialog from "@/components/workflow/dialog/errorDialog";
import nodeWrap from "@/components/workflow/nodeWrap";
export default {
  props: ["previewConfig"],
  components: {
    errorDialog,
    nodeWrap,
    approverDrawer,
  },
  data() {
    return {
      tipVisible: false,
      nowVal: 100,
    };
  },
  computed: {
    isPrewView() {
      return !!this.previewConfig;
    },
    nodeConfig() {
      if (this.isPrewView) {
        return this.previewConfig;
      } else {
        return this.$store.state.workflow.nodeConfig;
      }
    },
  },
  mounted() {
    if (!this.isPrewView) {
      const nodeConfig = {
        id: "root",
        type: "start",
        pid: "",
        name: "发起人",
        formPermission: "required",
      };
      this.$store.dispatch("workflow/setNodeConfig", nodeConfig);
    }
  },
  methods: {
    zoomSize(type) {
      if (type == 1) {
        if (this.nowVal == 50) return;
        this.nowVal -= 10;
      } else {
        if (this.nowVal == 300) return;
        this.nowVal += 10;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.fd-nav-container {
  width: 100%;
  height: 100%;
}
.fd-nav {
  align-items: center;
  height: 50px;
  padding: 10px 30px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
}

.fd-nav-title {
  font-size: 16px;
  font-weight: bold;
  // color: #fff;
}

.fd-nav-content {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 30px;
}
.dingflow-design {
  width: 100%;
  background-color: #f5f5f7;
  overflow: auto;
  .box-scale {
    transform: scale(1);
    display: inline-block;
    position: relative;
    width: 100%;
    padding: 20px 0;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    min-width: -webkit-min-content;
    min-width: -moz-min-content;
    min-width: min-content;
    background-color: #fff;
    transform-origin: 50% 0 0;
  }
}
</style>
